<template>
  <el-dialog
    title="流程图查看"
    :visible="visible"
    width="1250px"
    append-to-body
    fullscreen
    destroy-on-close
    @close="close"
  >
    <div ref="canvas" class="canvas" />
  </el-dialog>
</template>

<script>
import BpmnViewer from 'bpmn-js/lib/Viewer'
// import BpmnModeler from 'bpmn-js/lib/Modeler'
export default {
  name: 'diagramPreview',
  data() {
    return {

      visible: false,
      bpmnModeler: null,
      bpmnXmlStr: ''

    }
  },

  methods: {
    show(id) {
      // 读取流程图数据
      this.$api.workflow.workflowTemplate.getXml(id)
        .then(res => {
          this.bpmnXmlStr = res.data
          this.visible = true
          this.$nextTick(function () {
            this.init()
          })
        })
    },
    // 实例化流程模型
    init() {
      const canvas = this.$refs.canvas
      // 生成实例
      this.bpmnModeler = new BpmnViewer({
        container: canvas
      })
      // 生成流程图
      this.generateDiagram()
    },
    // 将字符串转换成图显示出来
    generateDiagram() {
      this.bpmnModeler.importXML(this.bpmnXmlStr, err => {
        if (err) {
          this.$Message.warning(err)
        }
        // this.bpmnModeler.get('canvas').zoom('fit-viewport')
      })
    },
    close() {
      this.visible = false
    }

  }
}
</script>
<style lang="scss" scoped>
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";

html,
body,
#app,
.el-dialog__body,
.containers,
.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}

.canvas {
  width: 100%;
  height: 800px;
}
</style>
<style lang="scss" >
.bjs-powered-by {
  display: none;
}
</style>
